<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style class="cp-pen-styles">
        body {
            background-color: #e3fbff;
        }

        .center {
            margin: 100px auto;
            width: 30px;
        }

        /* The element to hover over */

    </style></head>
<script src="../scripts/jquery/2.1.4/jquery.js"></script>
<script>
    $(function () {
        $('.warn').hover( function(e) {
            let popoverbox = $(".popover");
            let selected = $(this);
            let pos = selected.offset();
            let top = pos.top;
            let left = pos.left;
            popoverbox.html(selected.attr("content"))
            let pHeight = popoverbox.height();
            let pWidth =popoverbox.width()
            popoverbox.css({
                "top": top - pHeight - 23,
                "left": left - pWidth+12,
                "position": "absolute"
            });
        },function(e) {
            $(".popover").css({
                "left": 10000,
                "position": "absolute"
            });
        });

    });

</script>
<body>
<div class="center">
    <span class="warn" content="哈哈哈">!</span>
    <span class="warn" content="哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈啊哈啊哈啊哈啊哈啊哈啊哈啊哈哈哈哈哈哈啊哈">!</span>
</div>
<span class="popover">你好！</span>
</body>
</html>